<template>
	<div>
        <group gutter="0">
        	<x-input v-model="name">
        		<span class="h3" slot="label">收货人：</span>
        	</x-input>

        	<x-input  name="mobile" keyboard="number" is-type="china-mobile" v-model="mobile">
        		<span class="h3" slot="label">手机号码：</span>
        		<span class="h3" slot="right">+86</span>
        	</x-input>


			<cell is-link>
				<span class="h3" slot="title">
					所在地区：
				</span>
				<span class="h3" slot="value"  @click.stop="show1 = true">
					{{area}}
				</span>
			</cell>

			<x-textarea class="h3" :max="200" name="address" v-model="address"
			placeholder="详细地址：如街道、门牌号、小区、楼号、单元"></x-textarea>

		</group>

		<group v-if="$route.query.id">
			<x-switch class="h3" title="设为默认地址" :value-map="['0', '1']" v-model="isdefault">
				

			</x-switch>
		</group>

		<group>
		<x-button type="primary" @click.native="save">保存</x-button>
      	<x-button v-if="$route.query.id" type="warn" plain @click.native="del">删除</x-button>
      	</group>

        <yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
    </div>
</template>

<script>

import { mapGetters } from 'vuex';
import { Group, Cell, XInput, XTextarea, XSwitch, XButton } from 'vux';
import District from 'ydui-district/dist/jd_province_city_area_id';


export default {
	name: 'test',
		data () {
		return {
		  	'show1': false,
            'district': District,
            'name' : '',
            'mobile' : '',
            'area' : '请选择',
            'address' : '',
            'isdefault' : '0',
		}
	},

	components: {
	    Group,
	    Cell,
	    XInput,
	    XTextarea,
	    XSwitch,
	    XButton,
	},

	computed : {
		...mapGetters([
			'company_code', 
			'userdata',
			'mailList',
		]),

	},

	methods : {
		result1(ret) {
            this.area = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
        },


        save () {
        	console.log(this.name);
        	console.log(this.mobile);
        	console.log(this.area);
        	console.log(this.address);
        	console.log(this.isdefault);

        	if(this.name == ''){
        		this.$dialog.alert({'mes' : '必须填写收货人姓名'});
        		return;
        	}

        	if(this.mobile == ''){
        		this.$dialog.alert({'mes' : '必须填写收货人电话'});
        		return;
        	}

        	if(this.area == '请选择'){
        		this.$dialog.alert({'mes' : '请选择所在地区'});
        		return;
        	}

        	if(this.address == ''){
        		this.$dialog.alert({'mes' : '请填写详细地址'});
        		return;
        	}

        	var address = {
        		'area' : this.area,
        		'info' : this.address,
        	};



        	var para = {
        		lxr_name : this.name,
	            lxr_mobile : this.mobile,
	            lxr_address : this.area + '@dlq@' + this.address,
        	};

        	console.log(para);

        	if(this.$route.query.id){
        		para['id'] = this.$route.query.id;
        		para['state'] = this.isdefault;
        		this.$store.dispatch('updateMail', { 
	        		...para,
	        		cb : (res) => {
						console.log(res);
						this.success(res);
					}
				});
        	}else{
        		para['state'] = this.mailList.length == 0 ? '1' : '0',
        		this.$store.dispatch('createMail', { 
	        		...para,
	        		cb : (res) => {
						console.log(res);
						this.success(res);
					}
				});
        	}

        },


        success (res) {
        	if(res.errcode == 0){
				this.$dialog.alert({'mes' : '操作成功'});
				this.$router.push({ 
					'name': 'addresslist', 
					'query' : { 
						'company_code' : this.company_code,
					}
				});
			}else{
				this.$dialog.alert({'mes' : '操作失败'});
			}
        },


        del () {
        	var para = {
        		id : this.$route.query.id,
        		del_flg : '1',
        	};
    		this.$store.dispatch('updateMail', { 
        		...para,
        		cb : (res) => {
					console.log(res);
					this.success(res);
				}
			});
        },

	},

	mounted () {
		
		this.$store.dispatch('getMailList', { cb : (res) => {
			console.log(res);
		}});

		var id = this.$route.query.id;

		if(id){
			this.name = this.$route.query.lxr_name;
			this.mobile = this.$route.query.lxr_mobile;
			var address = this.$route.query.lxr_address.split('@dlq@');
			this.area = address[0];
			this.address = address[1];
			this.isdefault = this.$route.query.state;
		}
	}
}
</script>

<style scoped>


</style>
